<template>
    <div class="container" style="min-height: 100%; padding-bottom: 100px;" >
        <div style="position: fixed;box-sizing: border-box;bottom:5px;width: 100%;height: 60px; background-color: whitesmoke;z-index: 999;display: flex;align-items: center;justify-content: center;place-content: space-around;">
            <el-page-header @back="$router.go(-1)" content="首页" ></el-page-header>
            <div>
                <el-button type="primary" @click="_Call()" style="height: 48px;" size="big">咨询车主</el-button>
                <el-button type="warning" @click="_Order()" style="height: 48px;" size="big">提交订单</el-button>
            </div>
        </div>
        <el-carousel height="200px" indicator-position="none" v-if="body2.pic">
        <el-carousel-item v-for="item in body2.pic.split(',')" :key="item">
          <img :src="item" class="small"/>
        </el-carousel-item>
      </el-carousel>
      <div style="display: flex;">

          <div style="max-width: 70%; line-height: 1.5rem; padding: .5rem;">{{body.carname}} <el-tag><div v-html="body.cartag"></div></el-tag> </div>

      </div>
      <el-descriptions
        
        direction="vertical"
        :column="4"
        prop="body"
        border
      >
        <el-descriptions-item label="价格">{{body.price}}万</el-descriptions-item>
        <el-descriptions-item label="新车价" ><div v-html="body.newpriceshow"></div></el-descriptions-item>
        <el-descriptions-item label="地区">{{body.cityname}}</el-descriptions-item>
        <el-descriptions-item label="最后更新">{{formatDate(body.update_time?body.update_time:0)}}</el-descriptions-item>
        <el-descriptions-item label="里程">{{body.milage}}里</el-descriptions-item>
        <el-descriptions-item label="上牌时间">{{body.date}}</el-descriptions-item>
        <el-descriptions-item label="备注"></el-descriptions-item>
      </el-descriptions>
      <div>
      <div style="padding:5px" class="rate-block">
        <span class="demonstration">外观保养</span>
        <el-rate
          v-model="4.2"
          disabled
          show-score
          text-color="#ff9900"
          style="display:inline;margin-left:3px;"
          score-template="{value}">
        </el-rate>
      </div>
      <div style="padding:5px" class="rate-block">
        <span class="demonstration">维保情况</span>
        <el-rate
          v-model="4.5"
          disabled
          show-score
          text-color="#ff9900"
          style="display:inline;margin-left:3px;"
          score-template="{value}">
        </el-rate>
      </div>
      <div style="padding:5px" class="rate-block">
        <span class="demonstration">用户征信</span>
        <el-rate
          v-model="4.8"
          disabled
          show-score
          text-color="#ff9900"
          style="display:inline;margin-left:3px;"
          score-template="{value}">
        </el-rate>
      </div>
      <div style="padding:5px" class="rate-block">
        <span class="demonstration">综合评分</span>
        <el-rate
          v-model="4.6"
          disabled
          show-score
          text-color="#ff9900"
          style="display:inline;margin-left:3px;"
          score-template="{value}">
        </el-rate>
      </div>
      <span style="display:inline">综合：4.7</span>
    </div>
      <el-collapse v-model="collapseActiveNames" @change="handleChange3" 
      style="padding:.6rem;">
      <el-collapse-item title="基本信息" name="1" v-if="body2.vechile_desc">

        <div v-for="(val, key, index) in body2.vechile_desc">
            {{key}}：{{val}}
        </div>

      </el-collapse-item>
      <el-collapse-item title="损坏情况" name="2">
        <div style="position:relative;width:80%;margin: auto;">
          <div v-for="(item,key) in damage_object" >
          <el-popover
          placement="top-start"
          :title="`${item.title},${states_damage[item.degree][1]}`"
          :key="key"
          v-for="(item,key,index) in damage_object"
          trigger="click"
          :content="item.content"
          style="opacity: .2;"
          >
          <el-button class="damage_tag"  :style="`${position_damage[key].style}background-color:${states_damage
          [item.degree][0]};`"  slot="reference"  ></el-button>
        </el-popover>
      </div>
          <img src="http://www.janxland.xyz/img/vehicle.jpg" alt="">
        </div>
      </el-collapse-item>
      <el-collapse-item title="最近维修" name="3">
          <el-timeline :reverse="reverse">
        <el-timeline-item
          v-for="(activity, key,index) in maintenance"
          :key="key"
          :timestamp="activity.timestamp"
          >{{ activity.content }}</el-timeline-item
        >
      </el-timeline>
      </el-collapse-item>
      <el-collapse-item title="隐藏详细" name="3">
        <el-input v-model="uuid" v-on:keydown.13.native="_fetchBehind" v-if="!body3.id" placeholder="请输入车主给予的查询码"></el-input>
        <div v-for="(val, key, index) in body3.repair_desc">
            {{key}}：{{val}}
        </div>
      </el-collapse-item>
    </el-collapse>
    </div>
  </template>
  
  <script>
import { getDetail,addOrder } from '../api/jsoup';
  getDetail
    export default {
      props: [],
      components: {},
      data() {
        return {
          item: "",
          uuid:'',
          body:{pic:[]},
          body2:{},
          body3:{},
          query:{},
          maintenance:[
            {
              content: "更换 散热器",
              timestamp: "2022-04-15",
            },
            {
              content: "更换 空调管",
              timestamp: "2021-04-13",
            },
            {
              content: "更换 挡风玻璃",
              timestamp: "2020-04-11",
            },
          ],
          damage_object:{
            "左灯":{title:"左灯",degree:-1,content:"良好"},
            "右灯":{title:"右灯",degree:-1,content:"良好"},
            "前挡风玻璃":{title:"前挡风玻璃",degree:-1,content:"良好"},
            "引擎盖":{title:"引擎盖",degree:-1,content:"良好"},
            "前挡风玻璃":{title:"前挡风玻璃",degree:-1,content:"良好"},
            "车顶":{title:"车顶",degree:-1,content:"良好"},
            "后窗":{title:"后窗",degree:-1,content:"良好"},
            "后备箱":{title:"后备箱",degree:-1,content:"良好"},
            "后视镜(左)":{title:"后视镜(左)",degree:-1,content:"良好"},
            "后视镜(右)":{title:"后视镜(右)",degree:-1,content:"良好"},
            "左前窗":{title:"左前窗",degree:-1,content:"良好"},
            "左后窗":{title:"左后窗",degree:-1,content:"良好"},
            "右前窗":{title:"右前窗",degree:-1,content:"良好"},
            "右后窗":{title:"右后窗",degree:-1,content:"良好"},
            "后车灯(左)":{title:"后车灯(左)",degree:-1,content:"良好"},
            "后车灯(右)":{title:"后车灯(右)",degree:-1,content:"良好"},
          },
          states_damage:{
            "-1":["#FFFFFF","未知"],
            "0":["#00bb00","良好"],
            "1":["#d4db85","轻微磨损"],
            "2":["#d6c75e","中度磨损"],
            "3":["#ffc100","重度磨损"],
            "4":["#ff0000","严重磨损"]
          },
          position_damage:{
            "左灯":{style:"top:2%;left:20%;"},
            "右灯":{style:"top:2%;left:80%;"},
            "前挡风玻璃":{style:"top:70%;left:90%;"},
            "引擎盖":{style:"top:10%;left:50%;"},
            "前挡风玻璃":{style:"top:40%;left:50%;"},
            "车顶":{style:"top:60%;left:50%;"},
            "后窗":{style:"top:80%;left:50%;"},
            "后备箱":{style:"top:92%;left:50%;"},
            "后视镜(左)":{style:"top:40%;left:5%;"},
            "后视镜(右)":{style:"top:40%;left:95%;"},
            "左前窗":{style:"top:50%;left:12%;"},
            "左后窗":{style:"top:70%;left:12%;"},
            "右前窗":{style:"top:50%;left:85%;"},
            "右后窗":{style:"top:70%;left:85%;"},
            "后车灯(左)":{style:"top:95%;left:20%;"},
            "后车灯(右)":{style:"top:95%;left:80%;"},
          },
        }
      },
      watch: {},
      computed: {},
      beforeCreate() {},
      created() {},
      beforeMount() {},
      mounted() {
        this.query = this.$route.params.detailQuery;
        getDetail({id:this.query.id,table:"brief"},(data)=>{
            let res = eval("(" + data + ")");
            this.body = res;
        });
        getDetail({id:this.query.id,table:"detail"},(data)=>{
            let res = eval("(" + data + ")");
            res.vechile_desc =  ( eval("(" + res.vechile_desc + ")"));
            if(res.damage_degree){
              this.damage_object = ( eval("(" + res.damage_degree + ")"));
            }
            this.body2 = res;
            this.handleDamageData();
        });
      },
      beforeUpdate() {},
      updated() {},
      destoryed() {},
      methods: {
        _fetchBehind(event){
          getDetail({id:event.target.value,table:"behind"},(data)=>{
            let res = eval("(" + data + ")");
            if(res){
              res.repair_desc =  ( eval("(" + res.repair_desc + ")"));
              this.body3 = res;
            } else {
              this.$message({
              message: `查询码错误！！！`,
              type: 'error'
            });
            }
        });
          
        },
        _Call:function(){
          this.$confirm(`是否询问获取密文查询更多详细？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let content;
            navigator.clipboard?
            navigator.clipboard.writeText(this.body2.uuid).then(() => {})
            :
            (content = document.createElement('textArea'),
            content.inner = this.body2.uuid,
            content.select(),
            document.execCommand('copy'))

            // var clipboard = document.createElement('div');
            // clipboard.innerText = this.body2.uuid;
            // clipboard.select();
            // document.execCommand("Copy");
          //  navigator.clipboard.writeText(this.body2.uuid).then(() => {});
            this.$message({
              message: `已复制在剪切板，密文为${this.body2.uuid}`,
              type: 'success'
            });
          })
        },
        _Order:function(){
          this.$confirm(`是否建立订单？`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            addOrder({pic:this.body.pic,good_title:this.body.carname,pay_amount:this.body.price,vehicle_id:this.body.id,custome_id:this.body.owner},(data)=>{
              let res = eval("(" + data + ")");
              if(res.states == "0"){
                
              this.$message({
                  message: '建立订单成功，请到我的订单处支付！',
                  type: 'success'
                });
              } else {
                
              this.$message({
                  message: res.msg,
                  type: 'error'
              });
              }
            });
          }).catch(() => {

          });
        },
        __getDetail:function(data){
            let res = eval("(" + data + ")");
            this.body = res;
        },
        removeouthe(html){

        },
        formatDate(date) {
            var date = new Date(date);
            var YY = date.getFullYear() + '-';
            var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
            var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
            var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
            var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
            return YY + MM + DD +" "+hh + mm + ss;
        },
        handleDamageData(){
          this.damage_object.forEach(element => {
          });
        }
      },
      fillter: {},
    }
  </script>
  
  <style scoped>
  i{
    font-style: none !important;
  }
  .damage_tag{
    position:absolute;
    width: 30px;
    height:30px;
    padding:0;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    opacity: .5;
    border: 1px solid black;
  }
  .rate-block{
    display: inline-block;
  }
  </style>